<template>
    <div v-if="isExt" :style="styleExternalIcon" class="svg-external-icon svg-icon"/>
    <svg v-else :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName"/>
    </svg>
</template>

<script lang="ts">
import {computed, defineComponent} from "vue";
import {isExternal} from '@/utils/validate'

export default defineComponent({
    name: 'SvgIcon',
    props: {
        iconClass: {
            type: String,
            required: true
        },
        className: {
            type: String,
            default: ''
        }
    },
    setup(props) {
        const isExt = computed(() => isExternal(props.iconClass))
        const iconName = computed(() => `#icon-${props.iconClass}`)
        const svgClass = computed(() => {
            if (props.className) {
                return 'svg-icon ' + props.className
            } else {
                return 'svg-icon'
            }
        })
        const styleExternalIcon = computed(() => {
            return {
                mask: `url(${props.iconClass}) no-repeat 50% 50%`,
                '-webkit-mask': `url(${props.iconClass}) no-repeat 50% 50%`
            }
        })
        return {
            isExt,
            iconName,
            svgClass,
            styleExternalIcon
        }
    }
})
</script>

<style scoped>
.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
}

.svg-external-icon {
    background-color: currentColor;
    mask-size: cover !important;
    display: inline-block;
}
</style>
